<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证测试</title>
<script>
 /*
    "textAlign":0
	   单元格对齐方： 
     0 水平左对齐   1 水平居中  2 水平右对齐   3 垂直顶部对齐  4 垂直居中对齐  5 垂直底部对齐 6 
    */
    var my_jsonData =
            [
                {
                    "cells": [
                        {
                            "content": "1联办事项",
                            "text": "1联办事项",
                            "x": 0,
                            "y": 0,
                            "width": 144,
                            "height": 276,
                            "borderSize": 1.5,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 1,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 144,
                            "mHeight": 602,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                    
                                }
                            ],
                            "italic": [
                                {
                                    
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                    
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                   
                                }
                            ],
                            "fontSize": [
                                {
                                   
                                }
                               
                            ],
                            "fontColor": [
                                {
                                    
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                  
                                }
                            ],
                            "firstLineIndent": 0,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "row": 0,
                            "col": 0,
                            "cells_selectionStart":0,                            
                            "cells_selectSecond":0,  
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "2没有 content《出生医学证明》签发",
                            "text": "没有 content《出生医学证明》签发",
                            "x": 144,
                            "y": 0,
                            "width": 144,
                            "height": 276,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                  
                                }
                            ],
                            "italic": [
                                {
                                    
                                }
                            ],
                            "underline": [
                                {
                                    
                                }
                            ],
                            "underlineColor": [
                                {
                                   
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                    
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                    
                                },
                                {
                                    
                                }
                            ],
                            "fontSize": [
                                {
                                    
                                },
                                {
                                    
                                }
                            ],
                            "fontColor": [
                                {
                                    
                                },
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                   
                                }
                            ],
                            "background": [
                                {
                                    
                                }
                            ],
                            "firstLineIndent": 0,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "3参加城乡居民基本医疗保险年度",
                            "text": "参加城乡居民基本医疗保险年度",
                            "x": 288,
                            "y": 0,
                            "width": 144,
                            "height": 276,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                   
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                    
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                    
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                    
                                }
                            ],
                            "fontSize": [
                             
                                {
                                  
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                   
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "4银行扣费账户信息",
                            "text": "银行扣费账户信息",
                            "x": 432,
                            "y": 0,
                            "width": 144,
                            "height": 276,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": true,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                  
                                }
                            ],
                            "italic": [
                                {
                                  
                                }
                            ],
                            "underline": [
                                {
                                  
                                }
                            ],
                            "underlineColor": [
                                {
                                 
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                   
                                }
                               
                            ],
                            "fontSize": [
                                {
                                  
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                   
                                }
                            ],
                            "background": [
                                {
                                  
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "5请填报广州市行政区域内网点开户的本人或代办人个人活期结算账户，以确保银行扣费成功。因填报信用卡、对账本等不可扣费的账户，或因填报非本市账户、账户信息错误、账户冻结、注销、挂失、锁定、余额不足等原因，导致银行无法及时扣费的，税务部门不承担任何责任。“*”、“-”等字符请勿填写。",
                            "text": "请填报广州市行政区域内网点开户的本人或代办人个人活期结算账户，以确保银行扣费成功。因填报信用卡、对账本等不可扣费的账户，或因填报非本市账户、账户信息错误、账户冻结、注销、挂失、锁定、余额不足等原因，导致银行无法及时扣费的，税务部门不承担任何责任。“*”、“-”等字符请勿填写。",
                            "x": 576,
                            "y": 0,
                            "width": 144,
                            "height": 276,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                   
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                    
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                   
                               
                                }
                            ],
                            "fontSize": [
                                {
                                    
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                  
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        }
                    ]
                },
                {
                    "cells": [
                        {
                            "content": "",
                            "text": "",
                            "x": 0,
                            "y": 276,
                            "width": 144,
                            "height": 326,
                            "borderSize": 1,
                            "showBorder": false,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": 0,
                            "parentCol": 0,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                    
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                   
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                  
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                    
                                }
                            ],
                            "fontSize": [
                                {
                                    
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                   
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "row": 1,
                            "col": 0,
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "7",
                            "text": "",
                            "x": 144,
                            "y": 276,
                            "width": 144,
                            "height": 326,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                   
                                }
                            ],
                            "italic": [
                                {
                                  
                                }
                            ],
                            "underline": [
                                {
                                  
                                }
                            ],
                            "underlineColor": [
                                {
                                  
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                   
                              
                                }
                            ],
                            "fontSize": [
                                {
                                  
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                    
                                }
                            ],
                            "background": [
                                {
                                 
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "8如新生儿从出生到办理参保登记时横跨两个自然年度的，需在出生6个月内同时参加两个年度的城乡居民医保并缴费到账",
                            "text": "如新生儿从出生到办理参保登记时横跨两个自然年度的，需在出生6个月内同时参加两个年度的城乡居民医保并缴费到账",
                            "x": 288,
                            "y": 276,
                            "width": 144,
                            "height": 326,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                  
                                }
                            ],
                            "italic": [
                                {
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                   
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                  
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                  
                                }
                            ],
                            "fontSize": [
                                {
                                  
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                   
                                }
                            ],
                            "background": [
                                {
                                  
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "9本人承诺上述填写信息真实、准确，参保人未在本统筹地区及其他统筹地区重复参加基本医疗保险，并已了解城乡居民医保参保缴费时间、方式，以及待遇享受等相关政策，现申请参加广州市城乡居民医保。",
                            "text": "本人承诺上述填写信息真实、准确，参保人未在本统筹地区及其他统筹地区重复参加基本医疗保险，并已了解城乡居民医保参保缴费时间、方式，以及待遇享受等相关政策，现申请参加广州市城乡居民医保。",
                            "x": 432,
                            "y": 276,
                            "width": 144,
                            "height": 326,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                   
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                   
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                   
                                
                                }
                            ],
                            "fontSize": [
                                {
                                    
                                }
                            ],
                            "fontColor": [
                                {
                                    
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                    
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "10街道（镇）公共服务机构经办人签名：",
                            "text": "街道（镇）公共服务机构经办人签名：",
                            "x": 576,
                            "y": 276,
                            "width": 144,
                            "height": 326,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                   
                                }
                            ],
                            "italic": [
                                {
                                  
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                              
                                }
                            ],
                            "fontSize": [
                                {
                                   
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                   
                                }
                            ],
                            "background": [
                                {
                                   
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        }
                    ]
                },
                {
                    "cells": [
                        {
                            "content": "11街道（镇）民政/残联经办人签名：",
                            "text": "街道（镇）民政/残联经办人签名：",
                            "x": 0,
                            "y": 602,
                            "width": 144,
                            "height": 178,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                   
                                }
                            ],
                            "italic": [
                                {
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                   
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                  
                                }
                            ],
                            "fontSize": [
                                {
                                    
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                   
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "12参保人(代理人)确认",
                            "text": "参保人(代理人)确认",
                            "x": 144,
                            "y": 602,
                            "width": 144,
                            "height": 178,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                  
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                }
                            ],
                            "underlineColor": [
                                {
                                    
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                  
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                  
                                }
                            ],
                            "fontSize": [
                                {
                                   
                                }
                            ],
                            "fontColor": [
                                {
                                  
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                   
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "13以上内容由领证人填写，请核对正确无误后签字确认",
                            "text": "以上内容由领证人填写，请核对正确无误后签字确认",
                            "x": 288,
                            "y": 602,
                            "width": 144,
                            "height": 178,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                  
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                    
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                   
                                },
                                {
                                    
                                }
                            ],
                            "fontSize": [
                                {
                                   
                               
                                   
                                }
                            ],
                            "fontColor": [
                                {
                                  
                                }
                            ],
                            "lineThrough": [
                                {
                                   
                                }
                            ],
                            "background": [
                                {
                                   
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "14办理入户并一致同意其民族成份定为   族",
                            "text": "办理入户并一致同意其民族成份定为   族",
                            "x": 432,
                            "y": 602,
                            "width": 144,
                            "height": 178,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                  
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                   
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                    
                                }
                            ],
                            "fontSize": [
                                {
                                   
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                   
                                }
                            ],
                            "background": [
                                {
                                    
                                }
                            ],
                            "firstLineIndent": 2,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        },
                        {
                            "content": "15有效身份证类别",
                            "text": "有效身份证类别",
                            "x": 576,
                            "y": 602,
                            "width": 144,
                            "height": 178,
                            "borderSize": 1,
                            "showBorder": true,
                            "selected": false,
                            "rowspan": 0,
                            "colspan": 0,
                            "parentRow": -1,
                            "parentCol": -1,
                            "mWidth": 0,
                            "mHeight": 0,
                            "textAlign": 0,
                            "hasCheckBox": false,
                            "checkStatus": false,
                            "borderStyle": "solid",
                            "borderWidth": "1px",
                            "borderColor": "black",
                            "verticalAlign": "top",
                            "indent": 0,
                            "bold": [
                                {
                                   
                                }
                            ],
                            "italic": [
                                {
                                   
                                }
                            ],
                            "underline": [
                                {
                                   
                                }
                            ],
                            "underlineColor": [
                                {
                                   
                                }
                            ],
                            "backgroundColor": "transparent",
                            "underlineStyle": [
                                {
                                   
                                }
                            ],
                            "strikethrough": false,
                            "color": "rgb(0, 0, 0)",
                            "fontStyles": [
                                {
                                 
                                }
                            ],
                            "fontSize": [
                                {
                                  
                                }
                            ],
                            "fontColor": [
                                {
                                   
                                }
                            ],
                            "lineThrough": [
                                {
                                  
                                }
                            ],
                            "background": [
                                {
                                   
                                }
                            ],
                            "firstLineIndent": 0,
                            "lineSpacing": 15,
                            "horizontalAlign": "left",
                            "cells_selectionStart":0,
                            "cells_selectSecond":0, 
                            "cells_selectionEnd":0,
                            "maxHeight":16,
                            "minHeight":16,cursorVisible:false,cells_selectionEnd:0,cells_selectionStart:0
                        }
                    ]
                }
            ]
      

let templateDoc = [
    { para: { type: "Text", content: "hello\ngirl\n", url: "", rect: { left: 0, top: 0, right: 0, bottom: 0 } } },
    { para: { type: "Text", content: "welcome to china!\nthank!\n", url: "", rect: { left: 0, top: 0, right: 0, bottom: 0 } } },
    { para: { type: "Table", content: "这是一个表格","tableId":"7D09CE04-D104-C410-C571-BCF5B8D4EFD7", url: "", rect: { left: 0, top: 0, right: 0, bottom: 0 } } }
];

let loadedImages = [];  // Array to hold loaded image objects

function preloadImages(callback) {
    let imagesToLoad = templateDoc.filter(item => item.para.type === "Image");
    let imagesLoaded = 0;
    loadedImages = [];  // Clear previously loaded images

    if (imagesToLoad.length === 0) {
        callback();  // No images to load, proceed to rendering
        return;
    }

    imagesToLoad.forEach(item => {
        const img = new Image();
        img.onload = () => {
            loadedImages.push({ img: img, para: item.para });
            imagesLoaded++;
            if (imagesLoaded === imagesToLoad.length) {
                callback();  // All images loaded, proceed to rendering
            }
        };
        img.src = item.para.url;
    });
}
function displayOnCanvas() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;  // Set canvas size
    canvas.height = 600;

    let maxAscent = 0;
    let maxDescent = 0;

    let canvasOffsetLeft=canvas.offsetLeft;
    let canvasOffsetTop=canvas.offsetTop;

    console.log("offsetLeft:",canvasOffsetLeft,"offsetTop:", canvasOffsetTop);
    let yPosition = 0;

    templateDoc.forEach(item => {
        if (item.para.type === "Text") {
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            let lines = item.para.content.split('\n');
            let initialLeft = 10;
            item.para.rect.top = yPosition;
            item.para.rect.left = initialLeft;
            item.para.rect.right = initialLeft; // Reset right before measuring


           
         
           

            lines.forEach(line => {
               
                let metrics = ctx.measureText(line);

                maxAscent = Math.max(maxAscent, metrics.actualBoundingBoxAscent);
                maxDescent = Math.max(maxDescent, metrics.actualBoundingBoxDescent);
                const baseLineY = yPosition +  maxAscent; // 调整y坐标，基于垂直对齐偏移

                ctx.fillText(line, initialLeft, baseLineY);
                yPosition += 20;
              

                item.para.rect.right = Math.max(item.para.rect.right, initialLeft + metrics.width);
                console.log("Line:",line,"left:",initialLeft,"top:",item.para.rect.top,"right:",item.para.rect.right,"height:",yPosition);
            });
            console.log("-----------------------");
            item.para.rect.bottom = yPosition;  // Correct bottom position to include the last line
        } else if (item.para.type === "Image") {
            const imageObj = loadedImages.find(loadedImage => loadedImage.para.url === item.para.url);
            if (imageObj) {
                ctx.drawImage(imageObj.img, 10, yPosition);
                item.para.rect = {
                    left: 10,
                    top: yPosition,
                    right: 10 + imageObj.img.width,
                    bottom: yPosition + imageObj.img.height
                };
                yPosition += imageObj.img.height + 20;
            }
        }
    });
}

function onCanvasClick(e) {
    const canvas = document.getElementById('canvas');
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left + window.scrollX;
    const y = e.clientY - rect.top + window.scrollY;
    const index = getParaIndexAt(x, y);
    console.log("Cursor Position - X:", x, "Y:", y); // 打印光标位置

    if (index !== -1) {  // 确保找到有效的段落
        const para = templateDoc[index].para;
        console.log("Clicked para index:", index);
        console.log("Type:", para.type);
        console.log("Content:", para.content);
        if (para.type === "Image") {
            console.log("Image URL:", para.url);
        }
    } else {
        console.log("No para was clicked.");
    }
}



function addText() {
    const textContent ="This is a test\nThis should be a new paragraph\nAnd this is part of it.";// prompt("Enter new text content:");
    templateDoc.push({
        para: {
            type: "Text",
            content: textContent,
            url: "",
            rect: { left: 0, top: 0, right: 0, bottom: 0 }
        }
    });
    displayOnCanvas();
}

function addImage() {
    const imageUrl ="../imgs/addindent.png";// prompt("Enter image URL:");
    templateDoc.push({
        para: {
            type: "Image",
            content: "Image paragraph",
            url: imageUrl,
            rect: { left: 0, top: 0, right: 0, bottom: 0 }
        }
    });
    preloadImages(displayOnCanvas);
}

function modifyItem() {
    const index = 1;//parseInt(prompt("Enter the index of the item to modify:"));
    if (index >= 0 && index < templateDoc.length) {
        const newText = "This is a test\nThis should be a new paragraph\nAnd this is part of it.";//prompt("Enter new text for this item:", templateDoc[index].para.content);
        templateDoc[index].para.content = newText;
        preloadImages(displayOnCanvas);
    }
}

function deleteItem() {
    const index = parseInt(prompt("Enter the index of the item to delete:"));
    if (index >= 0 && index < templateDoc.length) {
        templateDoc.splice(index, 1);
        preloadImages(displayOnCanvas);
    }
}
function addTable() {
   
    
       

        /*
        "para": {
             "type": "table",
             "content": "这是表格",
             "tableId": "EC09E0DE-59C0-02D5-EA66-7ED4403859DC",
             "rect": {
                    "left": 10,
                    "top": 0,
                    "right": 138.0625,
                    "bottom": 60
                  }
               }
        */
        templateDoc.push({ para: { type: "table", content: "这是一个表格",tableData:my_jsonData, url: "" , "rect": {"left": 10,"top": 0,"right": 138.0625,"bottom": 60
                  }} });
 
                  preloadImages(displayOnCanvas);  // Re-load images if needed and refresh canvas
}
function getParaIndexAt(x, y) {
    const canvas = document.getElementById('canvas');
    let canvasOffsetLeft=canvas.offsetLeft;
    let canvasOffsetTop=canvas.offsetTop;
    console.log("offsetLeft:",canvasOffsetLeft,"offsetTop:", canvasOffsetTop);
    console.log("x:",x,"y:",y);
    //  x=x-canvasOffsetLeft;
    //  y=y-canvasOffsetTop;
    let currentX=x-canvasOffsetLeft;
    let currentY=y+10;

    for (let i = 0; i < templateDoc.length; i++) {
        let rect = templateDoc[i].para.rect;
        console.log("11=>rect.left:",rect.left,"rect.top:",rect.top,"rect.right:",rect.right,"rect.bottom:",rect.bottom);
        console.log("22=>x:",currentX,"y:",currentY);
        if (currentX >= rect.left && currentX <= rect.right && currentY >= rect.top && currentY <= rect.bottom) {
            return i;
        }
    }
    return -1;
}



window.onload = function() {
    const canvas = document.getElementById('canvas');
    canvas.addEventListener('click', onCanvasClick);
    preloadImages(displayOnCanvas); // Preload any initial images and display
};
</script>
</head>
<body>
<h1>Canvas Display of TemplateDoc with Interaction</h1>
<canvas id="canvas" style="border:1px solid #000;"></canvas>
<button onclick="addText()">Add Text</button>
<button onclick="addTable()">Add Table</button>
<button onclick="addImage()">Add Image</button>
<button onclick="modifyItem()">Modify Item</button>
<button onclick="deleteItem()">Delete Item</button>
</body>
</html>
